<template>
    <div class="app-container giftDay_form-container">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" value-format="yyyy.MM.dd"
                        type="date" placeholder="选择日期" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id" @change="storeChange">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select placeholder="选择区域" v-model="formInline.area_id" style="width:100px">
                        <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="选择类型" v-model="formInline.type" style="width:100px">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.name" placeholder="请输入机台编号/机台名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px;width:400px">
                            1. 今日出货数=上次盘点数+本次补货数-本次拿出数-今日盘点数（该公式取值时间范围为上次盘点时的时间至今日盘点时的时间之间的数值）
                            <br> 2.出货差异=今日出货数-系统出货数
                            <br> 3.系统出货数取值为查询日期06:00至次日06:00的数据
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <el-table highlight-current-row v-loading.body="listLoading" :data="list" border size="small" show-summary
                :summary-method="getSummaries">
                <el-table-column align="center" prop="time" label="日期" width="75"></el-table-column>
                <el-table-column align="center" prop="no" label="机台编号" sortable></el-table-column>
                <el-table-column align="center" prop="char_project_type" label="机台名称" sortable>
                    <template slot-scope="scope">
                        {{scope.row.project_type}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="char_project_type_first" label="机台类型" sortable>
                    <template slot-scope="scope">
                        {{scope.row.project_type_first}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="神采礼品编号">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.no_obsolete}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="礼品名称" width="280">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.gift_name}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="成本单价">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.gift_cost/1000000|keepTwoNum}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="上日盘点数">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.last_check}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本次补货数">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.put_in}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="本次拿出数量">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.take_out}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="今日盘点数">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.check_num}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="unitsshipped" label="今日出货数"
                    :render-header="(h,obj) => renderHeader(h,obj,'今日出货数=上次盘点数+本次补货数-本次拿出数-今日盘点数（该公式取值时间范围为上次盘点时的时间至今日盘点时的时间之间的数值）')">
                    <template slot-scope="scope">
                        <p v-for="item in scope.row.list" :key="item">{{item.unitsshipped}}</p>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="系统出货数"
                    :render-header="(h,obj) => renderHeader(h,obj,'系统出货数取值为查询日期06:00至次日06:00的数据')">
                    <template slot-scope="scope">
                        {{scope.row.claw}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="diff" label="出货差异"
                    :render-header="(h,obj) => renderHeader(h,obj,'出货差异=今日出货数-系统出货数')">
                    <template slot-scope="scope">
                        <span :class="{danger:scope.row.diff!=0}">{{scope.row.diff}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
    import {
        getList,
        // getBrandList,
        getStoreList,
        getAreaList,
        getTypeList,
    } from "@/api/storage_control/giftDay_form";
    import { renderHeader } from '@/utils';
    export default {
        data() {
            return {
                renderHeader,
                listLoading: false,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7
                    },
                },
                pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()) - 1).toISOString().slice(0, 10).replace('-', '.').replace('-', '.'),
                storeList: null,
                // brandList: [],
                typeList: [],
                areaList: [],
                formInline: {
                    area_id: '',
                    store_id: '',
                    type: '',
                    datetime: '',
                    name: '',
                    look_del: '0'
                },
                list: [],
                total: {},
            };
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                if (!vm.storeList) {
                    vm.getStore();
                    vm.getType();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    switch (index) {
                        case 0:
                            sums[index] = '合计';
                            break;
                        case 7:
                            sums[index] = this.total.last_check;
                            break;
                        case 8:
                            sums[index] = this.total.put_in;
                            break;
                        case 9:
                            sums[index] = this.total.take_out;
                            break;
                        case 10:
                            sums[index] = this.total.check_num;
                            break;
                        case 11:
                            sums[index] = this.total.unitsshipped;
                            break;
                        case 12:
                            sums[index] = this.total.claw;
                            break;
                        case 13:
                            sums[index] = this.total.diff;
                            break;
                        default:
                            sums[index] = '-';
                    }
                });
                // let tdArr = document.getElementsByClassName('is-leaf')
                // if (this.list.length != 0 && sums[13] != 0) {
                //     tdArr[tdArr.length - 1].style.color = "#F56C6C"
                // } else {
                //     tdArr[tdArr.length - 1].style.color = "#909399"
                // }
                return sums;
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 278 }).then(response => {
                    this.storeList = response;
                    let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length > 0) {
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.storeList.length > 0) {
                            this.formInline.store_id = this.storeList[0].id;
                        }
                    }
                    this.storeChange();
                });
            },
            storeChange() {
                this.formInline.area_id = '';
                this.getArea();
            },
            getArea() {
                getAreaList({ sid: this.formInline.store_id }).then(response => {
                    this.areaList = response;
                    if(response.length > 0) {
                        this.formInline.area_id = response[0].id;
                    }
                    
                });
            },
            getType() {
                getTypeList({}).then(response => {
                    this.typeList = response;
                });
            },
            searchClick() {
                this.formInline.datetime = this.pickerDate ? this.pickerDate : '';
                this.fetchData();
            },
            // 列表获取
            fetchData() {
                const that = this
                this.listLoading = true;
                let totalData = {
                    last_check: 0,
                    put_in: 0,
                    take_out: 0,
                    check_num: 0,
                    unitsshipped: 0,
                    claw: 0,
                    diff: 0,
                };
                getList(this.formInline).then(response => {

                    response.forEach(function (val, i) {
                        val.no *= 1;
                        val.diff = (val.unitsshipped * 1 - val.claw * 1);
                        val.list.forEach(function (val, i) {
                            totalData.last_check += val.last_check * 1
                            totalData.put_in += val.put_in * 1
                            totalData.take_out += val.take_out * 1
                            totalData.check_num += val.check_num * 1
                            totalData.unitsshipped += val.unitsshipped * 1
                        })
                        totalData.claw += val.claw * 1
                        totalData.diff += val.diff * 1
                    });
                    this.total = totalData
                    this.listLoading = false;
                    this.list = response;
                }).catch(res=>{
                    this.listLoading=false;
                })

            },
        }
    };
</script>
<style rel="stylesheet/scss" lang="scss">
    .giftDay_form-container {
        .el-table {
            margin: 0
        }

        .el-table .cell {
            padding: 0 !important;
            line-height: 36px
        }

        .el-table--small td,
        .el-table--small th {
            padding: 0
        }

        .giftDay_form-container .el-table .cell {
            padding: 0 !important;
            line-height: 36px
        }

        td p {
            border-bottom: 1px solid #dedede;
            line-height: 36px;
            height: 36px;
            padding: 0;
            margin: 0;
        }

        td p:last-child {
            border: none;
            padding: 0;
        }
    }
</style>